<template>
  <div class="app-container">
    <div v-if="!detailVisible">
      <el-card>
        <div style="height: 100px">
          <ul class="publish-total">
            <li>
              <div>任务总数</div>
              <div class="value">{{ totalItem.total }}</div>
            </li>
            <li>
              <div>未发布</div>
              <div class="value">{{ totalItem.initialized_num }}</div>
            </li>
            <li>
              <div>进行中</div>
              <div class="value">{{ totalItem.progressing_num }}</div>
            </li>
            <li>
              <div>已延期</div>
              <div class="value">{{ totalItem.postponed_num }}</div>
            </li>
            <li>
              <div>已完成</div>
              <div class="value">{{ totalItem.completed_num }}</div>
            </li>
          </ul>
        </div>
      </el-card>
      <el-card style="margin-top: 30px;height: 100%">
        <div style="margin-bottom: 30px">
          <el-radio-group v-model="radio" @change="handleStatus">
            <el-radio-button v-for="sts in radioStatus" :key="sts.value" :label="sts.value">{{ sts.label }}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="search">
          <el-input v-model="form.name" style="width: 200px;margin-right: 20px" clearable placeholder="任务名称" />
          <!-- <el-select v-model="form.status" class="select" clearable filterable placeholder="请选择发布状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <el-select v-model="form.status" class="select" clearable filterable placeholder="请选择填报状态">
            <el-option
              v-for="val in publishStatus"
              :key="val.value"
              :label="val.label"
              :value="val.value"
            />
          </el-select>
          <el-select v-model="form.frequency" class="select" clearable filterable placeholder="请选择任务频次">
            <el-option
              v-for="val in taskFrequency"
              :key="val.value"
              :label="val.label"
              :value="val.value"
            />
          </el-select>
          <!-- <el-select v-model="form.type" class="select" clearable filterable placeholder="请选择周期">
            <el-option
              v-for="item in publishStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <el-button type="primary" icon="el-icon-search" style="margin-left: 40px" @click="setResult">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
          <!-- <el-button type="primary" icon="el-icon-plus" style="margin-left: 40px" @click="setResult">发布任务</el-button> -->
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="name" label="任务名称" width="240">
            <template slot-scope="scope">
              <div>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="填报状态">
            <template slot-scope="scope">
              <div class="sub-status">
                {{ getStatus(scope.row.status) }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="notify_type" label="模板类型" /> -->
          <el-table-column prop="progressing" label="任务进度">
            <template slot-scope="scope">
              <el-progress :percentage="parseFloat((scope.row.progressing*100).toFixed(0))" />
            </template>
          </el-table-column>
          <el-table-column prop="start_date" label="开始日期">
            <template slot-scope="scope">
              <div v-if="scope.row.start_date">
                <i class="el-icon-time" />
                {{ scope.row.start_date }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="end_date" label="截止日期">
            <template slot-scope="scope">
              <div v-if="scope.row.end_date">
                <i class="el-icon-time" />
                {{ scope.row.end_date }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="填报单位">
            <template slot-scope="scope">
              <!-- <el-popover
                placement="top-start"
                title="县区"
                width="200"
                trigger="hover"
              >
                <div v-for="(item, index) in scope.row.districts" :key="index">{{ item.name }} </div>
                <div slot="reference">{{ scope.row.districts[0].name }}</div>
              </el-popover> -->
              <div>{{ getDistrict(scope.row.districts) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="year" label="填报周期">
            <template slot-scope="scope">
              <div v-if="scope.row.frequency == 'monthly'">{{ scope.row.year + '年' + scope.row.key + '月' }}</div>
              <div v-else>{{ scope.row.key }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="发布状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.status == 1 || scope.row.status == 5 ? '未发布' : '已发布' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="210" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="text" >详情</el-button> -->
              <el-tag style="margin-right: 10px" @click="handleDetail(scope.row)">详情</el-tag>
              <el-tag v-if="scope.row.status == 1 || scope.row.status == 5" @click="handleSave(scope.row)">发布</el-tag>
              <el-tag v-if="scope.row.status == 2" @click="handleRevoke(scope.row)">撤回</el-tag>
              <!-- v-if="scope.row.status == 1" -->
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="total" :limit="10" :background="false" :page="currentPage" @pagination="handleCurrentChange" @pageSize="handleSizeChange" />

      </el-card>
    </div>
    <Detail v-if="detailVisible" :item="item" :district-list="districtList" @goBack="goBack" />
    <Save v-if="editVisible" :item="item" :district-list="districtList" :edit-visible="editVisible" @update="update" />
  </div>
</template>
<script>
import { getTask, taskRevoke, getTaskTotal } from '@/api/table'
import { getDistrictList } from '@/api/authority'
import Save from './save.vue'
import Detail from './detail.vue'
export default {
  components: {
    Save,
    Detail
  },
  data() {
    return {
      tableData: [],
      form: {
        name: '',
        status: '',
        frequency: ''
      },
      radio: '0',
      item: {},
      listLoading: false,
      editVisible: false,
      detailVisible: false,
      total: 0,
      currentPage: 1,
      pageSizes: 10,
      taskFrequency: [
        {
          value: 'monthly',
          label: '按月'
        },
        {
          value: 'once',
          label: '一次性'
        }
      ],
      options: [{
        value: '1',
        label: '已发布'
      }, {
        value: '2',
        label: '未发布'
      }],
      publishStatus: [
        {
          value: '1',
          label: '未开始'
        },
        {
          value: '2',
          label: '进行中'
        },
        {
          value: '3',
          label: '已完成'
        },
        {
          value: '4',
          label: '已延期'
        },
        {
          value: '5',
          label: '已撤回'
        }
      ],
      radioStatus: [],
      totalItem: {},
      districtList: []
    }
  },
  created() {
    this.fetchData()
    this.getDicList()
    this.getTaskTotal()
    const radio = { value: '0', label: '全部任务' }
    this.publishStatus.forEach(item => {
      this.radioStatus.push(item)
    })
    this.radioStatus.unshift(radio)
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTask({ ...this.form, status: this.radio > 0 ? this.radio : this.form.status, page: this.currentPage, per_page: this.pageSizes }).then(response => {
        this.tableData = response.data
        this.total = response.pagination.total
        this.currentPage = response.pagination.current_page
        this.listLoading = false
      })
    },
    handleStatus(val) {
      // this.form.status = val
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pageSizes = val.limit
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val.page
      this.fetchData()
    },
    goBack() {
      this.detailVisible = false
    },
    getDicList() {
      getDistrictList({ page: 1, page_size: 1000 }).then(res => {
        this.districtList = res.data
      })
    },
    getDistrict(list) {
      const arr = []
      list.forEach(item => {
        arr.push(item.name)
      })
      const uniqueArr = Array.from(new Set(arr))
      return uniqueArr.join(',')
    },
    getStatus(status) {
      let label = ''
      this.publishStatus.forEach(item => {
        if (item.value == status) {
          label = item.label
        }
      })
      return label
    },
    reset() {
      this.form = {
        name: '',
        status: '',
        frequency: ''
      }
      this.radio = '0'
      this.currentPage = 1
      this.fetchData()
    },
    setResult() {
      this.currentPage = 1
      this.fetchData()
    },
    update(data) {
      this.editVisible = false
      if (data) {
        this.fetchData()
      }
    },
    getTaskTotal() {
      getTaskTotal().then(res => {
        this.totalItem = res.data
      })
    },
    handleDetail(row) {
      this.item = row
      this.detailVisible = true
    },
    handleRevoke(row) {
      this.$confirm('是否确认撤回', '撤回', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        taskRevoke({ id: row.id }).then(res => {
          if (res.status === 200) {
            this.$message({
              message: '撤回成功',
              type: 'success'
            })
            this.fetchData()
          }
        })
      })
    },
    handleSave(row) {
      this.item = row
      this.editVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.sub-status {
  // padding: 20px 20px;
  width: 60px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #51d351;
  color: #fff;
}
.publish-total {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .value {
    margin-top: 10px;
    text-align: center;
    font-size: 30px;
  }
}
.search {
  margin-bottom: 20px;
  .select {
    margin-right: 20px;
  }
}
</style>
